<%-- 
    Document   : bigpicture
    Created on : 2019-11-20, 22:04:57
    Author     : dusin
--%>
<%-- application.setAttribute("super",0);--%>   <%--大屏开始时加载所有数据 --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>大屏展示</title>
        <link rel="stylesheet" href="../../js/jquery/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="../../js/jquery/themes/icon.css" type="text/css" />
        <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../../js/jquery/jquery.easyui.min.js"></script>
        <script language="JavaScript">
            var factoryCode = '<%=request.getParameter("factoryCode")%>';
            var companyCode = '<%=request.getParameter("companyCode")%>';
            //使用禁用蒙层效果
                function coverLayer(tag){
                    with($('.over')){
                        if(tag==1){
                            css('height',$(document).height());
                            css('display','block');
                            css('opacity',1);
                            css("background-color","#FFFFFF");
                            css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
                        }
                        else{
                            css('display','none');
                        }
                    }
                }
            var currentDiv;    
            function processImg(){
                var imgsObj = $('img');//需要放大的图像
                if(imgsObj){
                    $.each(imgsObj,function(){
                        $(this).click(function(){
                            var currImg = $(this);
                            if(typeof(currImg.attr('src'))=="undefined"||currImg.attr('src')=="nopic.jpg"||
                                    currImg.attr('src')=="null.jpg"||
                                    (!currImg.attr('src')&&currImg.attr('src')==null)||
                                    currImg.attr('src')=='#'){    //图片不存在
                                alert('图片不存在');
                                return;
                            }
                            //隐藏table
                            var imgId = currImg.attr('id');
                            if(imgId.indexOf("div100")!=-1){
                                currentDiv = oneDiv;
                            }else{
                                currentDiv = fourDiv;
                            }                          
                            currentDiv.hide();
                            isStop=true;
                            coverLayer(1);
                            var tempContainer = $('<div align="center" class=tempContainer></div>');//图片容器
                            with(tempContainer){//width方法等同于$(this)
                                appendTo("body");
                                var windowWidth=$(document).width();
                                var windowHeight=$(document).height();
                                //获取图片原始宽度、高度
                                var orignImg = new Image();
                                orignImg.src =currImg.attr("src") ;
                                var currImgWidth= orignImg.width;
                                var currImgHeight = orignImg.height;                                
                                if(currImgHeight<windowHeight){
                                    var topHeight=(windowHeight-currImgHeight)/2;
                                    topHeight=topHeight-35;
                                    css('top',topHeight);                                    
                                    html('<img border=0 src=' + currImg.attr('src') + '>');
                                }else{
                                    css("top",0);
                                    html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
                                }                                
                            }
                            tempContainer.click(function(){                                
                                $(this).remove();
                                coverLayer(0);
                                isStop=false;  
                                currentDiv.show();                             
                            });
                        });
                    });
                }
                else{
                    return false;
                }
            }    
            var oneDiv;  //大图
            var fourDiv; //4分图
           var isStop = false;  //暂停轮播;
           var count=0;
           var queue=[];
           //填充空值，无图片区块
           function fillNullContent(i){
               var idPrefix = '#div'+i;
               $(idPrefix+'front').attr("src","null.jpg")    //第一张图片
               $(idPrefix+'side').attr("src","null.jpg")    //第二张图片               
               $(idPrefix+'license').attr("src","null.jpg")    
               $(idPrefix+'paper').attr("src","null.jpg")    
                        
           }
           //填充内容 i第几个区域，d数据对象
           function fillContent(i,d){
               var idPrefix = '#div'+i;
               if(d.frontPhoto!=null)
                    $(idPrefix+'front').attr("src","../../photo/"+d.frontPhoto)    //第一张图片
                else
                    $(idPrefix+'front').attr("src","nopic.jpg")    //第二张图片
                if(d.sidePhoto!=null)
                    $(idPrefix+'side').attr("src","../../photo/"+d.sidePhoto)    //第二张图片
                else{
                    $(idPrefix+'side').attr("src","nopic.jpg")    //第二张图片
                }
                if(d.licensePhoto!=null)
                    $(idPrefix+'license').attr("src","../../photo/"+d.licensePhoto)    //第二张图片
                else{
                    $(idPrefix+'license').attr("src","nopic.jpg")    //第二张图片
                }
                if(d.paperPhoto!=null)
                    $(idPrefix+'paper').attr("src","../../photo/"+d.paperPhoto)    //第二张图片
                else
                    $(idPrefix+'paper').attr("src","nopic.jpg")    //第二张图片

           }
            function createImg(id,w,h,t,l){
                var img = $("<img></img>");
                img.attr("id",id);
                img.css("width",w+"px");
                img.css("height",h+"px");
                img.css("position","absolute");
                img.css("top",t+"px");
                img.css("left",l+"px");
                img.attr("src","nopic.jpg");
                return img;
            }
            
            function createDiv(n,c,w,h,t,l){  //创建一个显示区块，包括四个图片和2个文本区.n为区块id，w宽,h高 c类               
                var iw = w-20;   //减去边框宽度和内边距
                var ih=h-20;
                var div = $("<div></div>"); 
                
                div.attr("id","div"+n);
                div.css("width",w+"px");
                div.css("height",h+"px");
                div.css("top",t+"px");
                div.css("left",l+"px");
                div.append(createImg("div"+n+"front",Math.floor(iw/2),Math.floor(ih/2),0,0));
                div.append(createImg("div"+n+"side",Math.floor(iw/2),Math.floor(ih/2),0,Math.floor(iw/2)));
                div.append(createImg("div"+n+"license",Math.floor(iw/2),Math.floor(ih/2),Math.floor(ih/2),0));
                div.append(createImg("div"+n+"paper",Math.floor(iw/2),Math.floor(ih/2),Math.floor(ih/2),Math.floor(iw/2)));
                //div.append(createTextDiv(n,c,iw,Math.floor(1*ih/9-5),Math.floor(ih*8/9),0));                   
                return div;
            }
            function createFourDiv(){
                var docWidth = $(document).width();
                var docHeight = $(document).height();
                var gridWidth = Math.floor(docWidth/2)-5;
                var gridHeight = Math.floor(docHeight/2)-3;  //4分格，每格一大小
                var fourDiv = $("<div id='fourDiv'></div>")
                fourDiv.css("width",docWidth);
                fourDiv.css("height",docHeight);                
                var div = createDiv(1,"small",gridWidth,gridHeight,0,0);
                fourDiv.append(div);
                div = createDiv(2,"small",gridWidth,gridHeight,0,gridWidth);
                fourDiv.append(div);
                div = createDiv(3,"small",gridWidth,gridHeight,gridHeight,0);
                fourDiv.append(div);
                div = createDiv(4,"small",gridWidth,gridHeight,gridHeight,gridWidth);
                fourDiv.append(div);
                return fourDiv;
            }
            function playQueue(){
                oneDiv.hide();
                fourDiv.show();
                var d = queue[count++];
                if(d!=null){
                    fillContent(1,d);
                }else{
                    fillNullContent(1);
                }
                d = queue[count++];
                if(d!=null){
                    fillContent(2,d);
                }else{
                    fillNullContent(2);
                }
                d = queue[count++];
                if(d!=null){
                    fillContent(3,d);
                }else{
                    fillNullContent(3);
                }
                d = queue[count++];
                if(d!=null){
                    fillContent(4,d);
                }else{
                    fillNullContent(4);
                }
                if(count>=16||count>queue.length){
                    count=0;
                }
            }
            function updateData() {
                //alert($('#g11')) 
                if(isStop) return ; //暂停轮播
                $.get("../../servlet/web/cargo/Load4BigScreenWithRequestParams",{factoryCode:factoryCode,companyCode:companyCode},
                    function(data,status){
                    if(status=='success'){
                        if(data.total>0){
                            if(queue[0]!=null&&data.rows[0].recordNo==queue[0].recordNo){
                                //不管有没有新数据，都更新队列，因为旧数据会不完整
                                while(queue.length>0){   //队列不超过14个元素
                                    queue.pop();
                                }
                                while(data.rows.length>0){
                                    queue.unshift(data.rows.pop());  //队头插入 返回的数组的末尾元素
                                }
                                return;
                            }
                            else{ //有新数据；显示新数据，并更新queue
                                $('#fourDiv').hide();
                                $('#div100').show();
                                fillContent(100,data.rows[0]);
                                count=0;                                
                            }
                            //不管有没有新数据，都更新队列，因为新数据会不完整
                            while(queue.length>0){   //队列不超过14个元素
                                queue.pop();
                            }
                            while(data.rows.length>0){
                                queue.unshift(data.rows.pop());  //队头插入 返回的数组的末尾元素
                            }                            
                        }                        
                    }                    
                });                
                playQueue();
            }
            $(document).ready(function() {
                var docWidth = $(document).width();
                var docHeight = $(document).height();
                fourDiv = createFourDiv();
                oneDiv = createDiv(100,"big",docWidth,docHeight,0,0);                
                $("body").append(oneDiv);
                $("body").append(fourDiv);
                processImg();
                //fillNullContent(100);
                updateData();
                var timer = setInterval(updateData, 15000);
                $(document).keydown(function(event){
                    if(event.keyCode ==32){
                        isStop=!isStop;  //暂停和继续
                    }
                });
            });
        </script>
    </head>
    <body style="width:100%;height:100%;background: white">          
        <style type="text/css">
            #div1 {
                border:10px solid black;
                position: absolute;                
                
                padding: 0px;
                margin: 0px;                
            }  
            #div2 {
                border:10px solid black;
                position: absolute;                
                padding: 0px;
                margin: 0px;                
            }
            #div3 {
                border:10px solid black;
                position: absolute;                
                padding: 0px;
                margin: 0px;                
            }
            #div4 {
                border:10px solid black;
                position: absolute;                
                padding: 0px;
                margin: 0px;                
            }
            #div100 {
                border:10px solid black;  
                position: absolute;
                padding: 0px;
                margin: 0px;                
            }
            #fourDiv {
                border:5px solid black;  
                position: absolute;
                top:0px;
                left:0px;                
                padding: 0px;
                margin: 0px;                
            }
            .img{
                height:100%;
                width:100%;
            }
            .big{                
                background:#EBF1DE;
            }
            .small{                
                background:#EBF1DE;
            }           
        </style>
    </body>
</html>
